<template>
  <div>
    <el-dialog :visible="showDialog" title="题目预览" width="800px" @close="btnCancel">
      <el-row>
        <el-col :span="24">
          <el-form :inline="true">
            <el-col :span="6">
              <el-form-item label="【题型】：">
                <span v-if="selections.questionType==1">单选</span>
                <span v-if="selections.questionType==2">多选</span>
                <span v-if="selections.questionType==3">简答</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【编号】：">
                <span>{{ selections.id }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【难度】：">
                <span v-if="selections.difficulty==1">简答</span>
                <span v-if="selections.difficulty==2">一般</span>
                <span v-if="selections.difficulty==3">困难</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【标签】：">
                <span>{{ selections.tags }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【学科】：">
                <span>{{ selections.subjectID }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【目录】：">
                <span>{{ selections.catalogID }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="【方向】：">
                <span>{{ selections.direction }}</span>
              </el-form-item>
            </el-col>
          </el-form>
        </el-col>
      </el-row>
      <hr>
      <el-form>
        <el-form-item label="【题干】："><span v-html="selections.question" /></el-form-item>
        <el-form-item />
        <el-form-item>
          <div>
            <span v-if="selections.questionType==='1'">单选题</span>
            <span v-if="selections.questionType==='2'">多选题</span>
            <span v-if="selections.questionType==='2'||selections.questionType==='1'">选项:（以下选中的选项为正确答案）</span>
          </div>
          <!-- 单选显示 -->
          <div v-if="selections.questionType==='1'">

            <div v-for="item in selections.options" :key="item.id" style="margin:10px">
              <el-radio v-model="radioRight" :value="item.radio" :label="item.isRight">
                {{ item.code }}
                <span>&nbsp;&nbsp;
                </span>{{ item.title }}
              </el-radio>
            </div>

          </div>
          <!-- 多选显示 -->
          <div v-if="selections.questionType==='2'">

            <div v-for="item in selections.options" :key="item.id" style="margin:10px">
              <el-checkbox :value="item.isRight===1?true:false">{{ item.title }}</el-checkbox>
            </div>

          </div>

        </el-form-item>
        <hr>
        <el-form-item label="【参考答案】：">
          <el-button type="danger" @click="showvideo=true">视频播放预览</el-button>
          <el-row>
            <video v-if="showvideo" :src="selections.videoURL" controls="controls" autoplay />
          </el-row>
        </el-form-item>
        <hr>
        <el-form-item label="【答案解析】："><span v-html="selections.answer" /></el-form-item>
        <hr>
        <el-form-item label="【题目备注】："><span v-html="selections.remarks" /></el-form-item>
      </el-form>
      <el-row type="flex" justify="end">
        <el-button type="primary" @click="btnCancel">关闭</el-button>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    selections: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      radioRight: 1,
      showvideo: false,
      dialogVisible: false,
      form: {
        type: []
      }
    }
  },
  methods: {
    handleClose(done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    // 关闭按钮
    btnCancel() {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style>

</style>
